<!--#include file="../appInit.aspx"-->
<!--#include file="../_user/appProduct.aspx"-->
<%
    // 配置当前目录的域名
    AppConfig.CurDomain = AppConfig.Domain + "/" + AppConfig.DirProducts;      
       
    lblProductsCatList.Text = LblProductCatList();
    lblProductsDetail.Text = LblProductDetails();
    lblImagesAlbum.Text = LblImagesAlbum();

    lblBreadcrumb.Text = LblBreadcrumb();
    lblTitle.Text = LblTitle();
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title><asp:literal id="lblTitle" runat="server"></asp:literal> -- 冠灵家居</title>
<style>
  @import "../_tools/jqthickbox/thickbox.css";
  @import "../_tools/jqzoom/css/jqzoom.css";
  @import "../_tools/jqcarousel/lib/jquery.jcarousel.css";
  @import "../_tools/jqcarousel/skins/tango1/skin.css";
  @import "css/global.css";
  @import "css/product.css";
</style>
<script type="text/javascript" src="../js/jquery.pack.js"></script>
<script type="text/javascript" src="../js/myjslib.js"></script>
<script type="text/javascript" src="../_tools/jqthickbox/thickbox.min.js"></script>
<script type="text/javascript" src="../_tools/jqzoom/js/jqzoom.pack.js"></script>
<script type="text/javascript" src="../_tools/jqcarousel/lib/jquery.jcarousel.pack.js"></script>

</head>
<body>
  <div id="container">
    <div id="header"><!--header-->
        <!--#include file="inc.header.aspx"-->
    </div><!--//header-->
    <div id="content">
        <div id="mainCol">
          <div style="border-bottom:1px solid #000;">
              <asp:literal id="lblBreadcrumb" runat="server"></asp:literal>
          </div>
          <div class="clear2"></div>
          <div style="position:relative" id="detail">
              <!-- 在这里显示产品详细 -->
              <asp:literal runat="server" id="lblProductsDetail"></asp:literal>
              <div style="position:absolute;top:0;left:0">
                  <div id="imgHolder" style="height:300px;"><a class="zoom" href="../images/noImg.png"><img src="../images/noImg.png" width="280px" height="300px" /></a></div>
                  <a class="thickbox" href="#">观看清晰图片</a>
                  <!--产品图片-->
                  <asp:literal runat="server" id="lblImagesAlbum"></asp:literal>
              </div>
          </div>

          <div id="comment">
            <div class="hd">
              
              <h3 class="left">产品评论</h3>
              <p class="left"><!--共有 0 条评论--></p>
              <p class="right"><span><!--查看所有评论--></span><span><a class="thickbox" href="#TB_inline?height=300&width=300&inlineId=commentForm">我要评论</a></span></p>
              <div class="clear2"></div><br />
              
              <div id="commentForm" style="display:none">
                  <form class="frm" method="post" action="/appLoadEx.aspx?cmd=products/art/add">
                       <input type="hidden" name="catId" value="<%=Request.QueryString["id"]%>" />
                    <p><label for="name">姓名：</label><input type="text" id="name" name="author" value="游客" /></p>
                    <p><label for="rows">内容：</label><textarea id="rows" name="content"></textarea></p>
                    <p><label for="validate">验证码：</label>
                       <input type="text" name="MyValidateCode" style="width:60px" />
                       <img id="valiImg" src="../images/ValidateCode.aspx" style="vertical-align:-0.8em;*vertical-align:-0.5em;border:none" />
                       <a href="javascript:document.getElementById('valiImg').src='../images/ValidateCode.aspx?'+new Date;void(0);">刷新</a>
                    </p>
                    <p><label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="submit" value="提交" /></p>
                  </form>
              </div>
              
              <div class="commentList"><!--显示评论列表--></div>
              <div class="clear2"></div><br />
              
            </div>
          </div>
        </div><!--//mainCol-->
        <div id="sideCol">
          <div id="commend" class="box">
            <div class="hd">
              <h2>推荐给我的朋友</h2>
              <span></span>
            </div>
            <div class="content">
            </div>
            <div class="ft"><span></span></div>
          </div>
          <div id="sales" class="box">
            <div class="hd">
              <h2>今日促销</h2>
              <span></span>
            </div>
            <div class="content">
            </div>
            <div class="ft"><span></span></div>
          </div>
        </div>
    </div>
    <div id="side"><!--side-->
      <!-- <p id="hot"><img src="images/hot.jpg"></p> -->
      <div id="search">
        <input id="SeachKeyWord" class="input" type="text" maxlength="12" onkeypress="keyUpdo(event);" onfocus="if(this.value=='家居') this.value='';" value="家居"/>
        <input class="btn" type="button" value="搜索"/>
      </div>
      <div id="category" class="box">
        <div class="hd">
          <h2>产品分类</h2>
          <span></span>
        </div>
        <div class="content">
            <!-- 在这里显示分类列表 -->
            <asp:literal runat="server" id="lblProductsCatList"></asp:literal>

        </div>
        <div class="ft"><span></span></div>
      </div>
      <div class="clear2"></div>
      <div id="price" class="box">
        <div class="hd">
          <h2>价格区间</h2>
          <span></span>
        </div>
        <div class="content">
            <!-- 在这里显示价格区间 -->

        </div>
        <div class="ft"><span></span></div>
      </div>
      <div class="clear2"></div>
      <div id="comment1" class="box">
        <div class="hd">
          <h2>热门评论</h2>
          <span></span>
        </div>
        <div class="content">
            <!-- 在这里显示热门评论 -->

        </div>
        <div class="ft"><span></span></div>
      </div>
    </div><!--//side-->
    <div class="clear2"></div>
    <div id="footer"><!--footer-->
        <!--#include file="inc.footer.aspx"-->
    </div><!--//footer-->
  </div>

<script type="text/javascript">

$(function() {

    // 幻灯片
    $('#productImages').jcarousel();

    $("#imgHolder img").attr("src",$('#productImages a').eq(0).attr("href"));
    $("#imgHolder a").attr("href",$('#productImages a').eq(0).attr("href"));
    $("#detail .thickbox").attr("href",$('#productImages a').eq(0).attr("href"));

    $('#productImages a').click(function(){ return false;})
                         .hover(function(){
        $("#imgHolder img").attr("src",$(this).attr("href"));
        $("#imgHolder a").attr("href",$(this).attr("href"));
        $("#detail .thickbox").attr("href",$(this).attr("href"));
        //$(this).css("border","2px solid blue");
    },function(){
        //$(this).css("border","none");
    });


    // zoom
    var options = {
        zoomWidth: 300,
        zoomHeight: 280,
        xOffset: 10,
        yOffset: 20,
        title: false,
        lens:false

    };
    $(".zoom").jqzoom(options);


    // 评论
    var comment = new Comments("#comment",".commentList",".frm");
});



    // 突出显示导航的当前项
    function navListener()
    {
        // 获取导航条对应数组
        var nav = document.getElementById("mainNav");
        nav = nav.getElementsByTagName("LI");

        // 当前元素
        var curEl = location.search.split('&');
        var aLink;
        var curIdx = 0;


        // 历遍 navs
        for ( var i=0; i<nav.length; i++ ){
            aLink = nav[i].getElementsByTagName("A")[0];
            aLink.className = "";

            if( -1 < nav[i].getElementsByTagName("A")[0].href.indexOf(curEl[0]) )
            {
                aLink.className = "c";
            }
        }
    }
    //navListener();


// 评论
(function($){

    // 构造函数
    // frameID包含listID,formID,这些ID可以是class或标签,但是要确保唯一性
    // frameID全局唯一,listID,formID平级,在frameID内唯一
    // formID必须是<form>标签的标识
    // 例如
    // <div id="frameID">
    //     <div  class=listID"></div>
    //     <form class="formID"></form>
    // </div>
    var Comments = window.Comments = function(frameID,listID,formID)
    {
        // 载入框架
        this.frame = $(frameID);
        this.list  = this.frame.find(listID);        //评论列表
        this.frm   = this.frame.find(formID);        //评论表单

        this.get_list( this.list );   // 监听显示
        this.submit_add( this.frm );  // 监听提交
    }

    // list方法
    Comments.prototype.get_list = function( objShow )
    {
        var a = location.hash.split('/');

        var curPage = a[a.length-1] || 1;
        var id = <%=Request.QueryString["id"]%>;

        // 读取数据
        var _ = this;
        var httpReq = $.getJSON( "/appLoad.aspx?cmd=products/art/list&catId="+id+"&page="+curPage+"&pageSize=5&time="+new Date(), function(json){
            var s = "";
            if( json.error ){
                s += '<p>'+json.error +'</p>';
            }else if( json.list ){
                var list = json.list;
                if( list.id ){
                    for( var i=0; i<list.id.length; i++ ){
                        s += '  <div>';
                        s += '    <p class="left"> <strong>' + $.htmlEncode(list.author[i])+'</strong> <span>['+list.createTime[i]+']</span></p>';
                        s += '  </div>';
                        s += '  <div>';
                        s += '    <p><span>'+list.content[i]+'</span></p>';
                        s += '  </div>';
                    }
                    s +=  '<div id="ajaxPageNav" class="green-black">' + $.pageNav( json.page.RecordCount, json.page.PageCount, json.page.CurrentPage,"blog/cmt/list/"+id ) +'</div>';

                }else{
                    s += '<p>该产品目前还没有评论!</p>';
                }
            }

            objShow.empty().append( s );
            _.page_nav();  // 监听分页导航
        });
    }

    // submit_comment 方法
    Comments.prototype.submit_add = function( frm )
    {
        var _ = this;
        frm.submit( function(){
            $.ajax({
                async: false,
                cache: false,
                timeout: 20000,
                type: "POST",
                contentType:"application/x-www-form-urlencoded",

                url: $(this).attr("action"),
                data:$(this).serialize(),
                dataType: "json",

                //complete:function(dat){alert(dat);},
                success:function(json){
                    if(json.error){
                        alert(json.error);
                    }else if( json.success ){
                        alert(json.success);
                    }else{
                      alert("未知的返回信息!");
                    }
                    _.get_list(_.list);
                },
                error: function(dat){ alert(dat + ": Error, 发生了错误");  }
            });
            return false;
        });

    };

    // page_nav 方法
    Comments.prototype.page_nav = function()
    {
        _ = this;
        $("#ajaxPageNav a").click(function(ev)
        {
          if( 0 == ev.button || 1 == ev.button )  // 只监听左键, 0是ff的左键,1是ie左键
          {
              var tag = ev.target;
              location.hash = tag.hash;
              _.get_list(_.list);
              return false;
          }
        });
    }

})(jQuery);
</script>
</body>
</html>